<template>
  <div>
    <!-- 资产列表 -->
    <el-row>
        <el-col :span="24">
            <div class="grid-content bg-purple-dark">
                <el-button type="primary" @click="AddProperty" size="medium" style="margin-left:30px; margin-top:15px;">新建资产</el-button>
                <el-button size="medium">导出</el-button>
                <el-button size="medium">导入</el-button>
            </div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24">
            <div class="grid-content bg-purple-dark-two">
                <el-input
                    style="width:200px;margin-left:30px;margin-top:25px;"
                    placeholder="请输入内容"
                    prefix-icon="el-icon-search"
                    v-model="voteInfo.input1">
                </el-input>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                资产类型：
                 <el-select v-model="voteInfo.type" multiple placeholder="资产类型" style="width:350px">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                资产状态：
                <el-select multiple  v-model="voteInfo.status" placeholder="资产状态" style="width:350px">
                <el-option label="空闲" value="1"></el-option>
                <el-option label="借用" value="2"></el-option>
                <el-option label="归还" value="3"></el-option>
                <el-option label="借用中" value="4"></el-option>
                <el-option label="归还中" value="5"></el-option>
                <el-option label="借用人变更" value="6"></el-option>
                <el-option label="已报废" value="7"></el-option>
                <el-option label="已挂失" value="8"></el-option>
                </el-select>
            </div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24">
            <div class="grid-content bg-purple-dark-three">
                 <el-table :data="tableData" border style="width: 97%;position: relative;top:20px;left:20px">
                    <el-table-column prop="date" label="资产编码" width="120"> </el-table-column>
                    <el-table-column prop="name" label="资产名称" width="200"> </el-table-column>
                    <el-table-column prop="name" label="资产分类" width="180"> </el-table-column>
                    <el-table-column prop="name" label="入库时间" width="150"> </el-table-column>
                    <el-table-column prop="name" label="购置金额" width="150"> </el-table-column>
                    <el-table-column prop="name" label="管理员" width="100"> </el-table-column>
                    <el-table-column prop="name" label="资产位置" width="180"> </el-table-column>
                    <el-table-column
                        fixed="right"
                        label="操作"
                        width="180">
                        <template slot-scope="scope">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <el-button
                            @click.native.prevent="handleEdit(scope.$index, scope.row)"
                            type="text" >
                            借出
                            </el-button>
                            <el-button
                            @click.native.prevent="updateStatus1(scope.$index, scope.row)"
                            type="text" >
                            归还
                            </el-button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                             <el-dropdown>
                                <el-button type="text" icon="el-icon-more" size="small"></el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>领用</el-dropdown-item>
                                    <el-dropdown-item>退库</el-dropdown-item>
                                    <el-dropdown-item>变更</el-dropdown-item>
                                    <el-dropdown-item>复制</el-dropdown-item>
                                    <el-dropdown-item>修改</el-dropdown-item>
                                    <el-dropdown-item>删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                  >
                  </el-pagination>
                </div>
            </div>
        </el-col>
    </el-row>

  </div>
</template>

<script scoped>
import axios from 'axios'
export default {
    data(){
        return{
            voteInfo:{
                input1:""
            },
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
         tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        pageNum: 1,
        pageSize: 5,
        total: 0,
        }
    },
    created(){
      this.getPropertyList();
    },
    methods: {
        //每页条数改变时触发 选择一页显示多少行
      handleSizeChange(val) {
        this.pageSize = val;
        this.getPropertyList();
      },
      //当前页改变时触发 跳转其他页
      handleCurrentChange(val) {
        this.pageNum = val;
        this.getPropertyList();
      },
      //查询方法 分页 调查，
      getPropertyList(){

      },
      AddProperty(){
         this.$router.push("/AddProperty"); //添加
      }
    }

}
</script>

<style scoped>
.block{
  padding-left: 800px;
  padding-top: 30px;
}
.el-row {
    margin-bottom: 20px;
    
  }
  .el-col {
    border-radius: 4px;
    
  }
  .bg-purple-dark {
    background: white;
    height: 70px;
  }
   .bg-purple-dark-two {
    background: white;
    height: 90px;
  }
   .bg-purple-dark-three{
    background: white;
    height: 500px;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>